<template>
    <div style="margin-left: auto">
        <p>采购入库</p>
    </div>
    <div>
        <span style="float: right;">
            <el-button type="Default" @click="">取消</el-button>
            <el-button style="background-color: aquamarine;border-color: aquamarine;color: white;"
                @click="">审核</el-button>
            <el-button type="info" @click="">反审核</el-button>
        </span>
    </div>
    <hr />
    <el-scrollbar style="height: 320px; color: dimgray">
        <div class="scrollbar-flex-content">
            <p class="scrollbar-demo-item">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="单据编码：" style="width: 308px">
                        <el-input v-model="form.documentNumber" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="单据日期" style="width: 308px">
                        <el-date-picker v-model="form.documentDate" disabled="true" type="date" style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="单据状态" style="width: 308px">
                        <el-select v-model="form.documentStatus" disabled="true">
                            <el-option label="开立" value="开立" />
                            <el-option label="审核" value="审核" />
                            <el-option label="返回" value="返回" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据类型" style="width: 308px">
                        <el-select v-model="form.documentType" placeholder="请选择" disabled="true">
                            <el-option label="入库单" value="入库单" />
                        </el-select>
                    </el-form-item>

                </el-form>

                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="业务类型" style="width: 308px">
                        <el-select v-model="form.businessType" placeholder="请选择" disabled="true">
                            <el-option label="采购入库" value="采购入库" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务状态" style="width: 308px">
                        <el-select v-model="form.businessStatus" placeholder="请选择" disabled="true">
                            <el-option label="正常" value="正常" />
                            <el-option label="挂起" value="挂起" />
                            <el-option label="手工关闭" value="手工关闭" />
                            <el-option label="系统关闭" value="系统关闭" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务部门：" style="width: 308px">
                        <el-select v-model="form.businessUnit">
                            <el-option label="总经办" value="1" />
                            <el-option label="市场部" value="2" />
                            <el-option label="采购部" value="3" />
                            <el-option label="销售部" value="4" />
                            <el-option label="生产运营中心" value="5" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务人员：" style="width: 308px">
                        <el-select v-model="form.businessPersonnel">
                            <el-option label="赵多和" value="赵多和" />
                            <el-option label="姜楠" value="姜楠" />
                        </el-select>
                    </el-form-item>

                </el-form>

                <el-form :inline="true" style="margin-top: 50px;" :model="form" class="demo-form-inline">
                    <el-form-item label="操作员" style="width: 308px">
                        <el-input v-model="form.operatorName" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="供应商" style="width: 308px">
                        <el-input v-model="form.supplier" />
                        <el-link type="primary" @click="dialogTableVisibleGYS = true">选择</el-link>
                    </el-form-item>
                    <el-form-item label="期间：" style="width: 308px">
                        <el-date-picker v-model="form.period" type="date" />
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="仓库" style="width: 308px">
                        <el-select v-model="form.warehouseId" disabled="true">
                            <el-option label="成品仓" value="成品仓" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="到货单号" style="width: 308px">
                        <el-input v-model="form.trackingNumber" />
                    </el-form-item>
                    <el-form-item label="备注信息" style="width: 308px">
                        <el-input v-model="form.noteInformation" />
                    </el-form-item>
                </el-form>
            </p>
        </div>
    </el-scrollbar>
    <div style="float: right;">
        <el-button type="warning" @click="">¼ 引入</el-button>
    </div>
    <table style="border-collapse: collapse">
        <tr>
            <td>序号</td>
            <td>销售订单号</td>
            <td>物料编码</td>
            <td>物料名称</td>
            <td>型号规格</td>
            <td>主计量</td>
            <td>数量</td>
            <td>体积</td>
            <td>批号</td>
            <td>备注</td>
        </tr>
        <tr>
            <td>
                {{ form.purchaseIncomingMaterialsId }} <!-- 序号 -->
            </td>
            <td>
                {{ form.salesOrder }} <!-- 销售订单号 -->
            </td>
            <td>
                {{ form.itemBianma }} <!--logisticsCode 物流编码-->
            </td>
            <td>{{ form.materialName }}</td><!--nameOfLogistics 物料名称 -->
            <td>{{ form.typeSpecification }}</td><!--modelSpecification 型号规格 -->
            <td>{{ form.documentType }}</td><!--mainMetering 主计量 -->
            <td>
                <el-input v-model="form.quantity" placeholder="请输入数量" style="width: 100px"></el-input>
            </td><!--num 数量 -->
            <td><el-input v-model="form.volume" style="width: 100px"></el-input></td>
            <td><el-input v-model="form.lotNumber" style="width: 100px"></el-input></td>
            <td><el-input v-model="form.remark" style="width: 100px"></el-input></td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import Cookie from 'cookies-ts';
import axios from 'axios';
import { number } from 'echarts';
const cookie = new Cookie()
const route = useRoute();
import { Plus, Download, Upload, List } from '@element-plus/icons-vue'
const dialogTableVisibleGYS: any = ref(false)
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020
const formLabelWidth = '140px';

onMounted(() => {
    GetSuppliers();
});

const form = reactive({
    purchaseIncomingMaterialsId: 2,
    salesOrder: "",
    itemBianma: "",
    materialName: "",
    typeSpecification: "",
    quantity: 1,
    volume: "",
    lotNumber: "",
    remark: "",
    purchaseWarehousingId: 0,
    documentNumber: "",
    documentDate: "",
    documentStatus: "",
    documentType: "",
    businessType: "",
    businessStatus: "",
    businessUnit: 2,
    businessPersonnel: "",
    operatorName: null,
    period: "",
    warehouseId: null,
    trackingNumber: null,
    supplier: null,
    noteInformation: "",
    auditDate: ""
});
const suppliers: any = ref([]);
const GetSuppliers = () => {
    axios
        .get(apiurls + '/api/PurchaseWarehousing/GetPurchaseWarehousingList',
            {
                params: {
                    documentNumber: route.query.documentNumber,
                    materialName: "",
                    businessStatus: "",
                    documentStatus: "",
                    salesOrder: "",
                    itemBianma: "",
                    pageIndex: 1,
                    pageSize: 10,
                }
            }
        )
        .then((res) => {
            form.purchaseIncomingMaterialsId = res.data.data.list[0].purchaseIncomingMaterialsId
            form.salesOrder = res.data.data.list[0].salesOrder
            form.itemBianma = res.data.data.list[0].itemBianma
            form.materialName = res.data.data.list[0].materialName
            form.typeSpecification = res.data.data.list[0].typeSpecification
            form.quantity = res.data.data.list[0].quantity
            form.volume = res.data.data.list[0].volume
            form.lotNumber = res.data.data.list[0].lotNumber
            form.remark = res.data.data.list[0].remark
            form.purchaseWarehousingId = res.data.data.list[0].purchaseWarehousingId
            form.documentNumber = res.data.data.list[0].documentNumber
            form.documentDate = res.data.data.list[0].documentDate
            form.documentStatus = res.data.data.list[0].documentStatus
            form.documentType = res.data.data.list[0].documentType
            form.businessType = res.data.data.list[0].businessType
            form.businessStatus = res.data.data.list[0].businessStatus
            form.businessUnit = res.data.data.list[0].businessUnit
            form.businessPersonnel = res.data.data.list[0].businessPersonnel
            form.operatorName = res.data.data.list[0].operatorName
            form.period = res.data.data.list[0].period
            form.warehouseId = res.data.data.list[0].warehouseId
            form.trackingNumber = res.data.data.list[0].trackingNumber
            form.supplier = res.data.data.list[0].supplier
            form.noteInformation = res.data.data.list[0].noteInformation
            form.auditDate = res.data.data.list[0].auditDate
        })
        .catch((err) => {
            console.log(err);
        });
};


</script>
<style scoped>
.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1500px;
    height: 300px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
}
</style>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
    border-top: 1px solid #ccc;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
}

/* 设置 td 的样式 */

table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
    white-space: nowrap;
    /* 防止内容换行 */
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 启用水平滚动 */
    margin: 20px 0;
    /* 设置容器的外边距 */
}
</style>
